<template>
	<el-container style="height: 500px; border: 1px solid #eee">
		<el-container>
			<el-main>
				<el-form ref="form" :model="form" label-width="150px">
					<el-form-item align="right">
						<el-radio v-model="form.convertBy" label="url">OpenAPI URL</el-radio>
						<el-radio v-model="form.convertBy" label="json">OpenAPI JSON</el-radio>
						<el-button type="primary">Convert</el-button>
					</el-form-item>
					<el-form-item label="Case File Path">
						<el-input v-model="form.path"></el-input>
					</el-form-item>
					<el-form-item label="OpenAPI URL" >
						<el-input v-model="form.openApiUrl"></el-input>
					</el-form-item>
					<el-form-item label="OpenAPI Doc" >
						<div ref="container" class style="height: 600px;width: 100%;"></div>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
//import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/editor/editor.main.js';
import * as monaco from 'monaco-editor'

 let editor = null;

  export default {
    watch: {
    },

    methods: {
      changeEditor() { // 更改editor内容
        this.openapiJSON = editor.getValue();
        console.log(this.openapiJSON);
        //this.monacoEditor.setValue(this.openapiJSON);
        //this.monacoEditor.getAction('editor.action.formatDocument')._run();
        },
        destroyEditor() { // 销毁编辑器
           // this.monacoEditor.dispose();
        },
        changeConvertBy(){
          this.form.convertBy = "json"
        }
    },

    destroied(){
      editor.dispose();
    },

    unmounted() {
      editor.dispose();
    },
    mounted() {
     // console.log("this.$refs.container:"+this.$refs.container)
    // 初始化编辑器，确保dom已经渲染，dialog中要写在opened中
    editor = monaco.editor.create(this.$refs.container, {
      value: "",
      language: "json"
      });
    //this.monacoEditor = editor;
    //console.log(editor.getValue())
    //alert(editor);
},
 data() {
    return {
        openapiUrl:"",
        openapiJSON:"22222",
        monacoEditor: {},
        form:{
          convertBy:"url"
        }
    }
    },
  };
</script>
<style>
</style>